<%@ page import="cn.labbook.bluetooth.constant.TenantPayConstant" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    %>
    <base href="<%=basePath%>">
    <title>蓝牙电表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" href="assets/css/admin/reset.css"/>
    <link rel="stylesheet" type="text/css" href="assets/plugins/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_893379_qj8lfap4ylj.css"/>
</head>
<style>
    /*让徽章上下居中*/
    .layui-badge {
        top: 50%;
        transform: translateY(-50%);
    }
</style>
<body>
<div>
    <div class=" clearfix margin-15">
        <div class="layui-col-md12">
            <div class="layui-card-header">
                服务费列表
            </div>
            <div class="layui-form layuiadmin-card-header-auto padding-tb-10 layui-card"
                 lay-filter="layadmin-userfront-formlist" id="searchForm">
                <div class="layui-form-item searchDiv" style="margin-bottom: 0">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="text-align: left">电表位置</label>
                        <div class="layui-input-block">
                            <select name="ammeterId" id="ammeterId" lay-search>
                                <option value="">请输入电表位置</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-useradmin" id="search"
                                lay-filter="LAY-user-front-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-tab-content">
                <table class="layui-table" id="payPmList" lay-filter="payPmList"></table>
            </div>
        </div>
    </div>
</div>
</body>
<script src="assets/plugins/Jquery/jquery.min.js"></script>
<script src="assets/plugins/layui/layui.all.js"></script>
<script src="assets/js/common.js"></script>
<script>
    var ammeterId = null;
    $(function () {
        layui.use(['table', 'form', 'laydate'], function () {
            var table = layui.table,
                form = layui.form;

            getAjaxReq("ammeter/list",null,function(res){
                var data = res.data;
                for(var i=0;i<data.length;i++){
                    var option =  '<option value="'+data[i].ammeterId+'">'+data[i].location+'</option>'
                    $("#ammeterId").append(option);
                    form.render('select');
                }
            });
            var data = [
                {type: 'numbers', title: '序号'},
                {field: 'januaryNum', title: '一月份', sort: false, align: 'center'},
                {field: 'februaryNum', title: '二月份', sort: false, align: 'center'},
                {field: 'marchNum', title: '三月份', sort: false, align: 'center'},
                {field: 'aprilNum', title: '四月份', sort: false, align: 'center'},
                {field: 'mayNum', title: '五月份', sort: false, align: 'center'},
                {field: 'juneNum', title: '六月份', sort: false, align: 'center'},
                {field: 'julyNum', title: '七月份', sort: false, align: 'center'},
                {field: 'augustNum', title: '八月份', sort: false, align: 'center'},
                {field: 'septemberNum', title: '九月份', sort: false, align: 'center'},
                {field: 'octoberNum', title: '十月份', sort: false, align: 'center'},
                {field: 'novemberNum', title: '十一月份', sort: false, align: 'center'},
                {field: 'decemberNum', title: '十二月份', sort: false, align: 'center'},
                {field: 'totalNum', title: '合计', sort: false, align: 'center'}
            ];
            table.render(
                renderTable("#payPmList", 'server/pay/page', data)
            );

            table.on('tool(payPmList)', function (obj) {
                var data = obj.data;
                ammeterId = data.ammeterId
                if (obj.event === "msg") {
                    layer.open({
                        type: 1,
                        title: "详情",
                        btnAlign: "c",
                        offset: ['25px'],
                        area: ['500px', '700px'],
                        content: $("#msgPmDiv"),
                        success: function () {
                            form.val('msgForm', {
                                "januaryNum": data.januaryNum
                                , "februaryNum": data.februaryNum
                                , "marchNum": data.marchNum
                                , "aprilNum": data.aprilNum
                                , "mayNum": data.mayNum
                                , "juneNum": data.juneNum
                                , "julyNum": data.julyNum
                                , "augustNum": data.augustNum
                                , "septemberNum": data.septemberNum
                                , "octoberNum": data.octoberNum
                                , "novemberNum": data.novemberNum
                                , "decemberNum": data.decemberNum
                                , "totalNum": data.totalNum
                            })
                        },
                        end: function (i) {
                            layer.close(i);
                            hideWithReset("#msgPmDiv", "#msgForm")
                        }
                    });
                }
                if (obj.event === "activate") {
                    layer.open({
                        type: 1,
                        title: "详情",
                        btnAlign: "c",
                        offset: ['150px'],
                        area: ['500px', '340px'],
                        content: $("#activatePmDiv"),
                        success: function () {

                        },
                        end: function (i) {
                            layer.close(i);
                            hideWithReset("#activatePmDiv", "#activateForm")
                        }
                    });
                }
                if (obj.event === "edit") {
                    layer.open({
                        type: 1,
                        title: "详情",
                        btnAlign: "c",
                        offset: ['25px'],
                        area: ['500px', '700px'],
                        content: $("#addPmDiv"),
                        success: function () {
                            form.val('editForm', {
                                "createTime": data.createTime
                                , "location": data.location
                                , "status": data.status
                                , "rechargeAmount": data.rechargeAmount
                                , "amount": data.amount
                                , "balance": data.balance
                                , "readingTime": data.readingTime
                                , "serverStatus": data.serverStatus
                                , "serverTime": data.serverTime
                                , "tryStatus": data.tryStatus
                                , "oweStatus": data.oweStatus
                                , "switchStatus": data.switchStatus
                                , "activateTime": data.activateTime
                                , "payType": data.payType
                                , "payPrice": data.payPrice
                            })
                        },
                        end: function (i) {
                            layer.close(i);
                            hideWithReset("#addPmDiv", "#editForm")
                        }
                    });
                }
            });
            form.verify({
                overdueDays: [/^[+]{0,1}(\d+)$/, '逾期天数必须是正整数']
            });
            $("#addPm").click(function () {
                layer.open({
                    type: 1,
                    title: "绑定电表",
                    btnAlign: "c",
                    offset: ['150px'],
                    area: ['800px', '400px'],
                    content: $("#activatePmDiv"),
                    success: function () {

                    },
                    end: function (i) {
                        layer.close(i)
                        hideWithReset("#activatePmDiv", "#editForm")
                    }
                });
            })
            form.on('submit(editSubmit)', function (obj) {
                var url = "ammeter/edit";
                var data = obj.field;
                data.ammeterId = ammeterId;
                postAjaxReq(url, data, function (res) {
                    if (res.code == 1) {
                        layer.closeAll();
                        table.reload('payPmList');
                        layer.msg("修改成功")
                        userId = null
                    } else {
                        layer.msg(res.msg)
                    }
                })
            });
            form.on('submit(activateSubmit)', function (obj) {
                var url = "ammeter/activate"
                var data = obj.field
                postAjaxReq(url, data, function (res) {
                    if (res.code == 1) {
                        layer.closeAll();
                        table.reload('payPmList');
                        layer.msg("激活成功")
                    } else {
                        layer.msg(res.msg)
                    }
                })
            });
            $("#search").click(function () {
                var ammeterId = $("#ammeterId").val();
                var tenantPayId = $("#tenantPayId").val();
                table.reload('payPmList', {
                    page: {curr: 1},
                    where: {
                        ammeterId: ammeterId,
                        tenantPayId: tenantPayId
                    }
                })
            });
        });
    })

    $("#cancel").on("click", function () {
        layer.closeAll()
    });

    function hideFun() {
        layer.closeAll();
        userId = null
    }

    function hideWithReset(hide, reset) {
        $(hide).hide()
        $(reset)[0].reset()
    }
</script>
</body>
</html>
